<template>
    <div class="videobox">
        <template v-if="videoFlag">
         <video v-if="videoShow" :id="videoId" autoplay="autoplay" preload="auto" class="video-js vjs-default-skin" :poster='poster'></video>
         <div v-else :id="videoId" ref="videoPlayer"></div>
        </template>
        <template v-else>
            <iframe style="width:100%;height:100%" :src="ifUrl"></iframe>
        </template>
    </div>
</template>

<script>
import videojs from 'video.js';
import 'videojs-contrib-hls'
import 'video.js/dist/video-js.css'
export default {
    props:{
        // 播放地址
        url:{
            type:String,
            default:''
        },
        // 容器ID
        videoId:{
            type:String,
            default:'singleVideo'
        },
        // 视频封面
        poster:{
            type:String,
            default:''
        }
    },
    data(){
        return{
            videoFlag:true,
            videoShow:true,
            singlePlayer:null,
            H256Player:null,
            ifUrl:'',
        }
    },
    watch:{
        url:{
            handler(src){
                console.log(src)
                this.videoShow = src.indexOf('47.106.20.70') == -1
                if(src.indexOf('ezopen') == -1){
                        this.videoFlag = true
                        console.log(this.videoShow)
                        if(this.videoShow){
                          setTimeout(() => {
                              //使用
                            this.singlePlayer = videojs(this.videoId, {
                                autoplay: true,//自动播放
                                controls: true,//控件显示
                                width: "",//视频框宽度
                                height: "",//视频框高度
                            });
                            // 播放地址
                            let res = src;
                            if (res) {
                                this.singlePlayer.src({ src: res, type: "application/x-mpegURL" });
                                this.singlePlayer.play();
                            }
                          }, 600);
                        }else{
                            this.$nextTick(() => {
                                this.singlePlayer = new WasmPlayer("", this.videoId, "", {
                                    Height: true
                                });
                                this.singlePlayer.play(src, 1);
                                this.singlePlayer.startLoding();
                                setTimeout(() => {
                                this.singlePlayer.endLoding();
                                }, 2000);
                            });
                        }
                }else{
                    this.videoFlag = false
                    this.ifUrl = `https://open.ys7.com/jssdk/theme.html?url=${src}&accessToken=at.3dxdnz7rc0pap7kq9wd8g72e41plkqnc-7hzhqzso3t-1jkiydm-ss9rkvnz6&id=ysopen`
                }
            },
            immediate:true
        }
    },
    beforeDestroy(){
        if(this.singlePlayer){
            this.singlePlayer.dispose();
        }
    }
}
</script>
<style scoped lang='scss'>
.videobox{
    width: 100%;
    height: 100%;
    .video-js{
        width: 100%;
        height: 100%;
    }
}
::v-deep .vjs-big-play-button{
   top: 42%;
   left: 42%;
}
</style>